/* .input {
    border:1px solid red;
}
.show{
    opacity: 1;
    transition:all 1s ease-in;
    -webkit-transition:all 1s ease-in;
    -moz-transition:all 1s ease-in;
    -ms-transition:all 1s ease-in;
    -o-transition:all 1s ease-in;
}
.hide{
    animation: hide-item 2s ease-in forwards;
    -webkit-animation: hide-item 2s ease-in forwards;
}
@keyframes hide-item {
    0% {
        opacity: 1;
        color: red;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 0;
        color: blue;
    }
} */

.fade-enter, .fade-appear{
    opacity: 0;
}
.fade-enter-active, .fade-appear-active{
    opacity: 1;
    transition:opacity 1s ease-in;
    -webkit-transition:opacity 1s ease-in;
    -moz-transition:opacity 1s ease-in;
    -ms-transition:opacity 1s ease-in;
    -o-transition:opacity 1s ease-in;
}
.fade-enter-done{
    opacity: 1;
}

.fade-exit{
    opacity: 1;
}
.fade-exit-active{
    opacity: 0;
    transition:opacity 1s ease-in;
    -webkit-transition:opacity 1s ease-in;
    -moz-transition:opacity 1s ease-in;
    -ms-transition:opacity 1s ease-in;
    -o-transition:opacity 1s ease-in;
}
.fade-exit-done{
    opacity:0;
}
